<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebRTC</title>
</head>

<body>
  <div id="app">
    <video id="localVideo" autoplay muted style="width:200px;height:200px;"></video>
    <video id="remoteVideo" autoplay style="width:200px;height:200px;"></video>
    <button @click="getInformation">向应用发送信息</button>
  </div>

</body>
<script type="text/javascript" src="./js/vue.global.prod.js"></script>
<script src="./js/uni.webview.1.5.6.js"></script>
<script>



  const { createApp, reactive, getCurrentInstance, ref } = Vue;
  const app = createApp({
    setup() {
      const data = ref(1)
      const getInformation = () => {
        uni.webView.postMessage({
          type: '1'
        })

      };
      window.x_sun = (e) => {
        console.log('x_sun', e)
      }
      return {
        data,
        getInformation
      };


    }
  });
  app.mount("#app")


  // $(document).ready(function () {
  //   var params = getQueryParams();
  //   let obj = JSON.parse(params.obj)
  //   console.log(obj);

  //   if (obj.platform == 1) {
  //     // 拨打
  //     Call()

  //   } else if (obj.platform == 2) {
  //     // 接听
  //     handleOffer(obj.Content, obj.id)
  //   }
  //   else if (obj.platform == 3) {
  //     // 已经接听
  //     console.log(obj.Content.sdp, 1111)
  //     peerConnection.setRemoteDescription(new RTCSessionDescription(obj.Content.sdp));
  //   }
  // });

  // 存储 WebRTC 连接

  const peerConnection = new RTCPeerConnection({
    iceServers: [{
      urls: 'stun:stun.l.google.com:19302'
    }]
  });
  // 获取本地视频流
  navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
  })
    .then(stream => {
      // 显示本地视频
      document.getElementById('localVideo').srcObject = stream;

      // 将本地流添加到 peerConnection 中
      stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
    })
    .catch(error => {
      console.error('获取媒体失败', error);
    });



  // 监听远端的媒体流
  peerConnection.ontrack = event => {
    document.getElementById('remoteVideo').srcObject = event.streams[0];
  };


  // 接收并设置远端的 SDP
  function handleOffer(offer, user_id) {
    peerConnection.setRemoteDescription(new RTCSessionDescription(offer.sdp))
      .then(() => peerConnection.createAnswer())
      .then(answer => peerConnection.setLocalDescription(answer))
      .then(() => {
        window.parent.postMessage({
          type: 'answer',
          localDescription: JSON.stringify(peerConnection.localDescription)
        }, '*');
        console.log(peerConnection.localDescription)
      })
      .catch(error => {
        console.error('处理 Offer 失败', error);
      });
  };

  // 接收并设置远端的 ICE 候选
  function handleICECandidate(candidate) {
    peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
      .catch(error => {

        console.error('添加 ICE 候选失败', error);
      });
  };

  /**
      呼叫通话
   */
  function Call() {
    peerConnection.createOffer()
      .then(offer => peerConnection.setLocalDescription(offer))
      .then(() => {
        console.log(peerConnection.localDescription)
        window.parent.postMessage({
          type: 'offer',
          localDescription: JSON.stringify(peerConnection.localDescription)
        }, '*');

      })
      .catch(error => {

        console.error('创建 Offer 失败', error);
      });
  }


  function getQueryParams() {
    var queryString = location.search;
    var queryParams = {};
    if (queryString.indexOf('?') === 0) {
      queryString = queryString.substring(1);
    }
    var pairs = queryString.split('&');
    for (var i = 0; i < pairs.length; i++) {
      var pair = pairs[i].split('=');
      var key = decodeURIComponent(pair[0]);
      var value = decodeURIComponent(pair[1]);
      queryParams[key] = value;
    }
    return queryParams;
  }
  window.addEventListener('message', function (event) {
  });
</script>


</html>